.textright {
    text-align: right;
}

.textleft {
    text-align: left;
}

.textcenter {
    text-align: center;
}

.fullwidth {
    width: 100%;
}
mat-card{
    margin: 10px;

    height: 600px;
}   

::-webkit-scrollbar {
  width: 0px;  /* remove scrollbar space */
  background: transparent;  /* optional: just make scrollbar invisible */
}

.chat-container {
    overflow-y: auto;
  }
  
  .chat-message {
    margin: 10px 0;
    min-height: 20px;

    animation: fadeIn 0.5s linear;
    animation-fill-mode: both;
    
    &:after {
      display: block;
      content: "";
      clear: both;
    }
  }
  
  .chat-message-content {
    width: auto;
    max-width: 85%;
    display: inline-block;

    padding: 7px 13px;
    border-radius: 15px;
    color: #595a5a;
    background-color: #eeeeee;
  
    &.human {
      float: right;
      color: #f7f8f8;
      background-color: #3392fb;
    }
  }
  

.json-response{
    background-color:#efefef;
    pre{
      height: auto;
      height: 500px;
      overflow: auto;
      background-color: #eeeeee;
      word-break: normal !important;
      word-wrap: normal !important;
      white-space: pre !important;
    }
    
}
  
$total-items: 5;
 
 // Set delay per List Item
@for $i from 1 through $total-items {
    .chat-message:nth-child(#{$i}) {
      animation-delay: .25s * $i;
    }
  }
  
  // Keyframe animation
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    75% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }